<template>
    <div class="tag">
        <page-main>
            <div class="flc">
                <h3 style="margin-right: auto;">标签列表</h3>
                <el-button type="primary" class="my-btn" disabled>新建标签</el-button>
            </div>
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f2f2f2',color:'#555',textAlign: 'center'}"
                border
                style="width: 100%;"
            >
                <el-table-column prop="name" label="标签名称" align="center" />
                <el-table-column prop="name" label="状态" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1" style="color: #67c23a;">使用中</span>
                        <span v-else style="color: red;">暂停中</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="对应律师数" align="center" />
                <el-table-column prop="mobile" label="用户选择率" align="center" />
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--<Pagination
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                @handle-size-change="handleSizeChange"
                @handle-current-change="handleCurrentChange"
            />-->
        </page-main>
    </div>
</template>

<script>
import { getTagList } from '@/api/lawyerApi'
export default {
    name: 'Tag',
    data() {
        return {
            tagList: [],
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 100,
            pageSizes: [5, 10, 15, 20]
        }
    },
    created() {
        this._getTagList() // 获取标签列表
    },
    methods: {
        async _getTagList() {
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            const res = await getTagList()
            console.log(res)
            this.tableData = res.data.list.reverse()
            this.$SpinkitLoading.close()
        },
        handleClick(row) {
            console.log(row)
        },
        // 分页 2 个方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pageSize = val
            // this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            // this._getOrderList() // 获取订单列表(待确认)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.currentPage = val
            // this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            // this._getOrderList() // 获取订单列表(待确认)
        }
    }
}
</script>

<!--<style scoped lang="scss">
    div {
        color: red;
    }
</style>-->
